<template>
  <div>
    <el-divider content-position="left">就诊记录</el-divider>
    <el-table size="small" :data="state.dataList" v-loading="state.loading" border
              :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
              @sort-change="sortChangeHandle">
      <el-table-column type="index" label="#" width="60"/>
      <el-table-column prop="doctorCode" label="医生工号" show-overflow-tooltip/>
      <el-table-column prop="doctorName" label="医生姓名" show-overflow-tooltip/>
      <el-table-column prop="visitDept" label="就诊科室" show-overflow-tooltip/>
      <el-table-column prop="customerName" label="患者姓名" show-overflow-tooltip/>
      <el-table-column prop="icCard" label="身份证号" show-overflow-tooltip/>
      <el-table-column prop="medicalCard" label="社保卡号" show-overflow-tooltip/>
      <el-table-column prop="visitTime" label="就诊时间" show-overflow-tooltip/>
      <el-table-column prop="visitEndTime" label="结束时间" show-overflow-tooltip/>
    </el-table>
    <pagination template-size="small" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                v-bind="state.pagination"/>
  </div>
</template>
<script setup lang="ts">

import {BasicTableProps, useTable} from "/@/hooks/table";
import {fetchList} from "/@/api/blood/bloodxCistomerDirection";

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchList,
  createdIsNeed: false,
  descs: ['visit_time'],
})

const {
  tableStyle,
  getDataList,
  sortChangeHandle,
  currentChangeHandle,
  sizeChangeHandle,
} = useTable(state)

const getData = (val: any) => {
  if (val.medicalCard) {
    state.queryForm.medicalCard = val.medicalCard
  }
  if (val.icCard) {
    state.queryForm.icCard = val.icCard
  }
  if (state.queryForm.medicalCard || state.queryForm.icCard) {
    getDataList()
  }
}


defineExpose({
  getData
})

</script>

<style scoped lang="scss">

</style>
